<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 15 - Filters</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    
    <script src="../../bin/pixi.dev.js"></script>
    <script src="pixi.js"></script>
</head>
<body>
    <script>
    
    var renderer = PIXI.autoDetectRenderer(630, 410);
    renderer.view.style.position = "absolute"
    renderer.view.style.width = window.innerWidth + "px";
    renderer.view.style.height = window.innerHeight + "px";
    renderer.view.style.display = "block";
    
    // add render view to DOM
    document.body.appendChild(renderer.view);

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0xFFFFFF, true);
    
    var pondContainer = new PIXI.DisplayObjectContainer();
    stage.addChild(pondContainer);

    stage.interactive = true;
    
    var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
    pondContainer.addChild(bg);

    //var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
    //littleDudes.position.y = 100;
    var padding = 100;
    var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
    var fishs = [];


    for (var i = 0; i < 20; i++) 
    {
        var fishId = i % 4;
        fishId += 1;

        //console.log("displacement_fish"+fishId+".png")
        var fish =  PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
        fish.anchor.x = fish.anchor.y = 0.5;
        pondContainer.addChild(fish);

        //var direction 
        //var speed = 
        fish.direction = Math.random() * Math.PI * 2;
        fish.speed = 2 + Math.random() * 2;
        fish.turnSpeed = Math.random() - 0.8;

        fish.position.x = Math.random() * bounds.width;
        fish.position.y = Math.random() * bounds.height;
        //fish.speed = new PIXI.Point(0,0)

        fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
        fishs.push(fish);

    };
    
    var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
    overlay.alpha = 0.2
    pondContainer.addChild(overlay);


    var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
    var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);

    
    pondContainer.filters = [displacementFilter];

    

    displacementFilter.scale.x = 50;
    displacementFilter.scale.y = 50;

    

    
    
    
    
    var count = 0;
    var switchy = false;
    
    /*
     * Add a pixi Logo!
     */
    var logo = PIXI.Sprite.fromImage("../../logo_small.png")
    stage.addChild(logo);
    
    logo.anchor.x = 1;
    logo.anchor.y = 1;

    logo.position.x = 630
    logo.scale.x = logo.scale.y = 0.5;
    logo.position.y = 400;
    logo.interactive = true;
    logo.buttonMode = true;
    
    logo.click = logo.tap = function()
    {
        window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
    }
    
    
    requestAnimFrame(animate);

    function animate() {
        
        count += 0.1;
        
        var blurAmount = Math.cos(count) ;
        var blurAmount2 = Math.sin(count * 0.8)  ;

        

        for (var i = 0; i < fishs.length; i++) 
        {
            var fish = fishs[i];

            fish.direction += fish.turnSpeed * 0.01;
            fish.position.x += Math.sin(fish.direction) * fish.speed;
            fish.position.y += Math.cos(fish.direction) * fish.speed;

            fish.rotation = -fish.direction - Math.PI/2;

            // wrap..

            if(fish.position.x < bounds.x)fish.position.x += bounds.width;
            if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width

            if(fish.position.y < bounds.y)fish.position.y += bounds.height;
            if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
        }

    
        displacementFilter.offset.x = count * 10//blurAmount * 40;
        displacementFilter.offset.y = count * 10
        
        overlay.tilePosition.x = count * -10//blurAmount * 40;
        overlay.tilePosition.y = count * -10
        
        renderer.render(stage);
        requestAnimFrame( animate );
    }

    </script>

    </body>
</html>
